<template>
  <div class="mui-content ">
    <!--<heade background='' title='我的收藏' v-on:goBack="goBack($event)"></heade>-->
    <div class="search">
      <input type="text" placeholder="输入资源名称或者关键词" v-on:keyup.enter="submit" v-model="search">
      <div class="mui-icon mui-icon-search" @click="submit"></div>
    </div>
    <div class="noResource" v-show="imgShow">

      <div><img src="../assets/img/3aa41c17c34735172a543eed6289129c.png" alt=""></div>
      <p>暂无资源</p>
    </div>
    <div  class="contentWrapper" ref="contentWrap" v-show="!imgShow">
      <div class="contentWrapper1">
        <div class="content" v-for="(item,index) in data" :key="index">
          <div class="leftContent  mui-left">
            <img :src=item.SUrl>
          </div>
          <div class="rightContent  mui-right">
            <div  class="title"  @click="ResourceDetail(data[index])">{{item.Name}}</div>
            <div class="text"><span>作者:</span><span>{{item.Author}}</span></div>
            <div class="text"><span>上传时间:</span><span>{{item.CDate}}</span></div>
            <div class="text"><span>资源类型:</span><span>{{item.ResourceType}}</span></div>
            <div class="text">
              <div class="starContent">
                <div class="info same">评分:</div>
                <div class="star">
                  <i class="star-item" v-for="(itemClass,index) in itemClasses" :key='index' :class="itemClass" ></i>
                </div>
              </div>
              <div class="collectWrapper" ref="changeCollect">
                <!--<div class="collect same">取消收藏：</div><i class="star3" @click="changeCollect(colletc)"></i>-->
                <div class="collect same" v-if="data[index].IsCollect" @click="myCollect(data[index])">取消收藏：<span class="star3"></span></div>
                <div class="collect same" v-if="!data[index].IsCollect" @click="myCollect(data[index])">收藏：<span class="star4"></span></div>
              </div>

            </div>
          </div>
        </div>
        <div class="fresh" v-show="up" style="height: 100px;line-height: 100px;margin-top: 0px">
          <Loading v-if="showmeLoad"></Loading>
          <div v-if="!showmeLoad" class="mui-text-center" style="color: grey;line-height: 50px;height: 20px">没有更多...</div>
        </div>
      </div>
    </div>

    <Prompt
      title="错误"
      msg="登陆过期"
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    >
    </Prompt>

  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  import BScroll from 'better-scroll'
  import  Prompt from '@components/common/Prompt.vue'
  import Loading from '@components/common/Loading'

  //星星的长度
  const  LENGTH=5
  //星星的状态
  const CLS_ON='on'
  const CLS_off='off'
  export default {
    components:{
      heade,
      Prompt,
      Loading
    },
    data(){
      return{
        up:false,
        showmeLoad:true,
        UserId:'',
       score:3,
        title:'一起做布娃娃',
        data:[],
        isCollect:false,
        contentScroll:{},
        scroll:{},
        search:'',
        mistake:false,
        imgShow:false,
        Page:1

      }
    },
    created(){
      let me=this;
      me.$Global.zcServer.Post({
        IsNeedLogin: 'true',
        Paras:{
          UserId:me.$Global.UserId ,
          Name:'Vue_CourseResource',
          Action:"Ext_StoreCollectList",
          Data:{
            Page:me.Page,
            queryStr:""
          }
        },
        Callback:me.cb_myCollect,
        Scope:me
      });
    },
    methods:{

      /*查询资源*/
      submit(){
        let me=this;
        // let Page=1;
        let queryStr=me.search;
        this.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_StoreCollectList",
            Data:{
              Page:me.Page,
              queryStr: me.search,
            }
          },
          Callback:me.cbResourceQuery,
          Scope:me,
        });

      },
      changeCollect(colletc){
        console.log(colletc)

      },
      /*进入资源详情*/
      ResourceDetail(detail){
        let me=this;
        let data={};
        data.SN=detail.SN;
        data.TS=detail.TS;
        this.$store.commit('setSN',data);
        // sessionStorage.setItem("DetailSN", data.SN);
        sessionStorage.setItem("DetailSN", JSON.stringify(data));
        this.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_ResourceStoreClickNumber",
            Data:{
              IsCollect: me.isCollect,
              SN: data.SN,
            }
          },
          Callback:me.cb_ClickNumber,
          Scope:me,
        });
        this.$router.push("ResourceDetail")
      },
      myCollect(index){
        let me=this;
        index.IsCollect= !index.IsCollect;
        this.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_ResourceStoreIsCollect",
            Data:{
              IsCollect: index.IsCollect,
              SN:index.SN,
              TS:index.TS
            }
          },
          Callback:me.cb_collect,
          Scope:me,
        });
      },
      goBack(){
        this.$router.push('/Index')
      },
      confirm1(){
        this.$router.push('/Login')
      },
      /*回调函数*/
      /*查询资源*/
      cbResourceQuery(resJson,scope){
        if(resJson.data.Data.length==0){

          this.data=resJson.data.Data;
          console.log('查詢資源')
          console.log( this.resource);
          this.imgShow=true;
          this.up=false
        }else{
          this.data=resJson.data.Data;
          this.imgShow=false;
          this.up=false
        }
        console.log("查询结果");
        console.log(resJson)
      },
      /*我的收藏进入查询结果*/
      cb_myCollect(resJson,scope){
        if(resJson.msg=="网络问题，无法连接到服务器!"){
          this.mistake=true
        } else {
          this.mistake=false
        }
        console.log('收藏',resJson);

        this.Pages = resJson.data.Pages
        if(this.Page==1){
          this.data=resJson.data.Data
        }
        else  if (this.Page <= this.Pages) {
          this.data.push.apply(this.data, resJson.data.Data);
          this.scroll.refresh();
        }
      },

      /*上拉刷新*/
      /*下拉加载更多*/
      BS() {
        this.$nextTick(() => {
          if (!this.$refs.contentWrap) {
            return;
          }
          // better-scroll的初始化
          this.scroll = new BScroll(this.$refs.contentWrap, {
            probeType: 3,
            click: true,
            scrollX: false,
            bounce: false
          });

          // console.log(this.scroll.maxScrollY);
          this.scroll.on('scroll', pos => {
            console.log("判断下拉的高度");
            console.log(pos.y);
            //如果上拉超过30px 就显示下拉刷新的文字
            if (pos.y < this.scroll.maxScrollY + 50) {
              this.up = true
            } else {
              this.up = false
            }
          });
          //touchEnd 通过这个方法来监听上拉
          this.scroll.on('touchEnd', pos => {
            // 下拉动作
            if (pos.y < this.scroll.maxScrollY + 100) {
              this.Page++
              if (this.Page > this.Pages) {
                this.Page = this.Pages
                this.showmeLoad = false
                return
              }
              this.scroll.refresh();
              console.log('下拉刷新成功');
              let me = this;
              me.$Global.zcServer.Post({
                IsNeedLogin: 'true',
                Paras: {
                  UserId: me.$Global.UserId,
                  Name: 'Vue_CourseResource',
                  Action: "Ext_StoreCollectList",
                  Data: {
                    Page: me.Page,
                    queryStr: ''
                  }
                },
                Callback: me.cb_myCollect,
                Scope: me
              });
              me.up = false;
            }
            // if(this.scroll.maxScrollY > pos.y + 10) {
            console.log('加载更多');
            // console.log(this.scroll.maxScrollY);
            //使用refresh 方法 来更新scroll  解决无法滚动的问题
            this.scroll.refresh();
            // }
            console.log(this.scroll.maxScrollY + '总距离----下拉的距离' + pos.y);
          });
          console.log(this.scroll.maxScrollY);
        })
      },
      /*点击视频返回结果*/
      cb_ClickNumber(resJson,scope){
        console.log('點擊',resJson);
      },
      /*收藏返回*/
      cb_collect(resJson,scope){
        console.log("收藏返回");
        console.log(resJson)
      },
      },
    computed:{
      itemClasses(){
        let result=[];

        //全星
        let integer=this.score;

        //遍历全星
        for(let i=0;i<integer;i++){
          result.push(CLS_ON)
        }
        //补齐
        while(result.length<LENGTH){
          result.push(CLS_off)
        }
        return result
      }
    },
    mounted() {
      setTimeout(() => {
        this.BS();
      }, 100);

    },
  }

</script>
<style scoped>

  .mui-content .search{
    width: 100%;
    /*margin: 2% 0;*/
    position: relative;
  }
  .mui-content .search input{
    /*float: left;*/
    /*display: inline-block;*/
    width: 100%;
    border: none;
    outline: none;
  }
  .mui-content .search input::-webkit-input-placeholder {
    font-size: 13px;

    text-align: left;

  }
  .mui-content .contentWrapper{
    width: 100%;
 position: absolute;
    top: 52px;
    bottom: 0;
    overflow: hidden;
  }
  .mui-content .search .mui-icon{
    position: absolute;
    width: 25px;
    height: 25px;
    right: 10px;
    top: 8px;
    color:rgba(93, 194, 240, 1);
    /*margin-right: 20px;*/
  }
  .mui-content .content{
    display: flex;
    background-color: white;
    padding-left: 3%;
    margin-top: 10px;
  }
  .mui-content .content .leftContent{
    width: 40%;

  }
  .mui-content .content .leftContent img{
    width:90%;
    height: 65%;
    margin-top: 28px;

  }
  .mui-content .content .rightContent{
    width: 60%;

  }
  .mui-content .content .rightContent .title{
    height: 40px;
    line-height: 50px;
    color:rgba(93, 194, 240, 1);
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mui-content .content .rightContent .text *{
    font-size: 0.8rem;
    color: #8f8f94;
    padding-right:6px;

  }
  .mui-content .content .rightContent .text .starContent{
    float: left;
  }
  .mui-content .content .rightContent .text .starContent *{
    display: inline-block;
  }

  .mui-content .content .rightContent .text .collectWrapper{
    overflow: hidden;
    float: right;
  }
  .mui-content .content .rightContent .text .collectWrapper *{
    display: inline-block;
  }
  .mui-content .content .rightContent .text .collectWrapper .same{

    padding-bottom: 15px;
    padding-right: 0px;
  }
  .mui-content .content .rightContent .text .starContent .same{
    padding-right: 2px;
  }

  .star{
    font-size: 0;
  }
  .star .star-item{
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }
  .star .star-item:last-child{
    margin-right: 0;
  }
  /* 二种图片类型*/
  .star .on{
    background-image: url('../assets/img/star1.png');
  }

  .star .off{
    background-image: url('../assets/img/star2.png');
  }
  .collectWrapper .star3{

    display: inline-block;
    width: 16px;
    height: 15px;
    background-size: 16px 15px;
    background-image: url('../assets/img/shouCang2.png');
  }
  .collectWrapper .star4{

    display: inline-block;
    width: 16px;
    height: 15px;
    background-size: 16px 15px;
    background-image: url('../assets/img/shouCang.png');
  }
  /*查询失败提示*/
  .mui-content .noResource{
    width: 100%;
    display: flex;
    align-items:center ;
    justify-content: center;
    flex-direction: column
  }
  .mui-content .noResource img{
    height: 150px;
    width: 150px;

  }
</style>
